<template>
  <div class="card-box">
    <div class="home-title">本单位项目预警情况</div>
    <template v-if="chartData != null">
      <div class="chart-wrapper">
        <div id="dept-warning"></div>
      </div>
    </template>
    <template v-else>
      <el-empty description="暂无数据" :image-size="80"></el-empty>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    setOption() {
      let cData = [
        { name: "项目数", value: this.chartData.num },
        { name: "预警数", value: this.chartData.num2 },
      ];
      let option = {
        legend: {
          right: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "本部门预警情况",
            type: "pie",
            selectedMode: "single",
            radius: [0, "50%"],
            label: {
              position: "inner",
              fontSize: 12,
            },
            labelLine: {
              show: false,
            },
            data: cData,
          },
          {
            name: "本部门预警情况",
            type: "pie",
            radius: ["65%", "80%"],
            label: {
              fontSize: 12,
              formatter: "{b} {c}",
            },
            labelLine: {
              length: 20,
            },
            data: cData,
          },
        ],
      };
      option && this.chart.setOption(option);
    },
  },
  mounted() {
    let dom = document.getElementById("dept-warning");
    this.chart = this.$echarts.init(dom);

    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  watch: {
    chartData(newVal) {
      if (newVal && this.chart) {
        this.setOption();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";
</style>